<template>
  <view :class="$style.container" class="flex" :style="{ position: 'absolute', bottom: fixBottom }">
    <view class="left" style="width:450rpx">
      <view :class="$style.name">{{ alertInfo.ajms || "报警称看到棋牌室着火" }}</view>
      <view :class="$style.address">{{ alertInfo.afdz || "秦淮区紫金明珠10栋204室" }}</view>
      <view class="type flex">
        <view :class="$style.level" style="background: #375ce4;">{{ getAlertLevel(alertInfo.ajdjdm, alertInfo.ajlxdm) ||
            "一级火灾"
        }}</view>
        <view :class="$style.station">{{ '@' + (alertInfo.zgjgjc || "夫子庙站") }}</view>
      </view>
    </view>

    <view class="flex-col-center">
      <view :class="$style.state">{{ getAlertState(alertInfo.ajlxdm) }}</view>
      <view :class="$style.time">{{ handleTime }}</view>
      <view :class="$style.text">{{ alertInfo.yszt ? '用时' : "已用时长" }}</view>
    </view>
  </view>

</template>

<script setup lang='ts'>
import { onMounted, onUnmounted, ref } from "vue";
import { alertType, alertLevel, alertState } from "@/static";
import { queryAlertInfo } from "@/api";

let alertInfo = ref<any>({})

interface Props {
  ajxxId: string | undefined;
  fixBottom?: number | string;
};

const props = withDefaults(defineProps<Props>(), {
  fixBottom: 0,
});


function getAlertLevel(levelNumber: string, typeNumber: string) {
  return alertLevel[levelNumber] + alertType[typeNumber];
}
function getAlertState(stateNumber: string) {
  return alertState[stateNumber];
}



/** 定义计时器 用于 案件处置时长 */
let timer: any = null
let handleTime = ref<string>('')

onMounted(() => {
  getList()
})


/** 获取警情数据 */
function getList() {
  queryAlertInfo({ ajxxId: props.ajxxId })
    .then((res: any) => {
      console.log("案件信息", res);
      alertInfo.value = setAlertHandleTime(res.data)
      setHandleTimer()
    })
    .catch((e: any) => {
      console.log(e);
    });
}




/** 处理 警情时间 */
function setAlertHandleTime(item: any) {
  if (item?.lasj == null) return
  // 默认进行 无处置时长操作
  let timeObj: any
  if (item?.ajztdm === '120' || item?.ajztdm === '200' || item?.ajztdm === '300') {
    timeObj = timeDifference(item.jssj, item?.jjsj || item?.lasj)
  } else {
    let currentTime: any = new Date()
    timeObj = timeDifference(currentTime, item?.jjsj || item?.lasj)
  }
  return item = {
    ...item,
    hour: timeObj.hour,
    minute: timeObj.minute,
    seconds: timeObj.second,
  }
}

/** 设置警情处置时长定时器 */
function setHandleTimer() {
  if (alertInfo.value?.ajztdm === '120' || alertInfo.value?.ajztdm === '200' || alertInfo.value?.ajztdm === '300') {

  } else {
    timer = setInterval(startTimer, 1000)
  }
  handleTime.value = addZero(alertInfo.value.hour) + '时' + addZero(alertInfo.value.minute) + '分'
}

/** 开始计时 */
function startTimer() {
  alertInfo.value.seconds += 1
  if (alertInfo.value.seconds >= 60) {
    alertInfo.value.seconds = 0
    alertInfo.value.minute = alertInfo.minute + 1
  }
  if (alertInfo.value.minute >= 60) {
    alertInfo.value.minute = 0
    alertInfo.value.hour = alertInfo.value.hour + 1
  }
}

/** 计算处置时长时间差 */
function timeDifference(currentTime: string, startTime: string) {
  let timeDiff = new Date(currentTime).getTime() - new Date(startTime).getTime() // 时间毫秒差值
  let hours = Math.floor(timeDiff / (1000 * 3600)) // 获取差值 时
  let timeDiffMinute = timeDiff % (1000 * 3600) // 计算小时数后剩余的毫秒数
  let minutes = Math.floor(timeDiffMinute / (1000 * 60)) // 获取差值 分
  let timeDiffSecond = timeDiffMinute % (60 * 1000)
  let seconds = Math.round(timeDiffSecond / 1000) // 获取差值 秒
  return {
    hour: hours,
    minute: minutes,
    second: seconds
  }
}

/** 时长 < 10  + 0 */
function addZero(num: number) {
  num = Math.abs(num)
  if (num < 10) return '0' + num
  if (num > 10) return num
}

/** 清除计时器 */
onUnmounted(() => {
  clearInterval(timer)
})

</script>

<style lang='less' module>
.container {
  left: 30rpx;
  justify-content: space-between;
  width: calc(100% - 60rpx);
  background: #ffffff;
  box-shadow: 0px 4px 19px 1px rgba(51, 51, 51, 0.2);
  border-radius: 20px;
  box-sizing: border-box;
  padding: 20rpx;

  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;


  .name {
    font-size: 32rpx;
  }

  .address {
    font-weight: 400;
    font-size: 28rpx;
    margin: 20rpx 0;
  }

  .level {
    padding: 5rpx 35rpx;
    border-radius: 8px;
    font-size: 40rpx;
    font-weight: 400;
    font-size: 22rpx;
    color: #ffffff;
  }

  .station {
    font-size: 24rpx;
    margin-left: 30rpx;
  }

  .state {
    font-size: 26rpx;
    color: #375ce4;
  }

  .time {
    font-family: Digital;
    margin: 15rpx 0;
    font-size: 36rpx;
    color: #ea1f13;
  }

  .text {
    font-size: 24rpx;
    font-weight: 400;
  }
}
</style>
